<template>
  <div class="cart-list">
    <div class="container" v-if="collect.length > 0">
      <!-- 收藏区域 -->
      <div class="list">
        <el-table
          :data="collectList"
          ref="multipleTable"
          highlight-current-row
          @selection-change="handleSelectionChange"
          style="width: 80%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            property="goodsName"
            label="商品名称"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            property="coverImg"
            label="商品图"
            align="center"
            width="120">
            <template slot-scope="scope">
               <el-image
               @click="toDetail(scope.row.goodsId)"
               style="width: 100px"
                :src="scope.row.coverImg"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            property="sellPrice"
            label="单价">
          </el-table-column>
          <el-table-column
            property="amount"
            label="数量"
            align="center"
            width="150">
          </el-table-column>
          <el-table-column
            property="totalMoney"
            align="center"
            label="小计">
            <template slot-scope="scope">
              {{scope.row.amount * scope.row.sellPrice}}
            </template>
          </el-table-column>
          <el-table-column
            property="describeTxt"
            align="center"
            label="转发描述">
          </el-table-column>
          <el-table-column
            align="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteCollect(scope.$index, scope.row)">删除该收藏</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 收藏结算 -->
      <div class="purches">
        <div class="left">
          <a href="/index">继续收藏</a>
          <div>
            共<span>{{ collect.length }}</span
            >种收藏，已选择<span>{{ selectNum }}</span
            >种
          </div>
        </div>
      </div>
    </div>
    <show-no-data v-else></show-no-data>
  </div>
</template>

<script>
import ShowNoData from "components/nodata/ShowNoData";
import { mapMutations, mapState } from 'vuex';
export default {
  name: "CollectList",
  data() {
    return {
      good: {
        consigneeAddress: '',
        consigneePhone: '',
        consigneeName: ''
      },
      collectList: [], // 收藏列表 完整
      addressDialog: false, 
      multipleSelection: [],
      // totalPrice: 0, //总金额
      isSelectedAll: false, //是否全部选中
    };
  },
  components: {
    ShowNoData,
  },
  computed: {
    ...mapState(['user', 'collect']),
    selectNum () {
      return this.multipleSelection.length
    },
    totalPrice () {
      return this.multipleSelection.reduce((total, cur) => {
        return (cur.amount * cur.goods.sellPrice) ? (cur.amount * cur.goods.sellPrice) + total : total
      }, 0)
    }
  },
  mounted() {
    // this.getCartList();
    // this.getAddressList()
    this.getCollect()
  },
  methods: {
    ...mapMutations(['setCartNum']),
    /**
     * 获取收藏列表 及 组装货品数据结构
     */
    getCollect () {
      this.collect.forEach(item => {
        this.getShop(item.goodsId)
      })
    },
    /**
     * 获取商品信息
     */
    async getShop (goodsId) {
      let query = {
        goodsId: goodsId
      }
      await this.$api.shop.getShop(query).then(res => {
        if (res.code === 200) {
          this.collectList.push(res.data)
        }
      }).catch(() => {
        this.collectList.push([])
      })
    },
    /**
     * 到商品详情页
     */
    toDetail (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    },
    /**
     * 删除收藏车中商品
     */
    deleteCollect (index, collect) {
      let params = {
        id: collect.id
      }
      this.$api.daity.deleteCollect(params).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '取消收藏成功'
          })
          this.collectList.splice(index, 1)
        }
      })
    },
    /**
     * 关闭收货地址弹框
     */
    closeDialog () {
      this.addressDialog = false
    },
    /**
     * 复选框选择
     */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /**
     * 触发弹框  
     */   
    payClick() {
      this.addressDialog = true
    }
  }
};
</script>
<style scoped>
/* 收藏总区域 */
.list {
  margin-top: 30px;
  padding: 0 43px;
  background-color: #fff;
}
/* 收藏列表 */
.list-item {
  display: flex;
  align-items: center;
  height: 125px;
  border-top: 2px solid #e5e5e5;
}
.select-btn {
  width: 22px;
  height: 22px;
  margin-right: 20px;
  margin-right: 74px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.item-img {
  width: 80px;
  height: 80px;
  margin-right: 30px;
}
.item-img img {
  width: 100%;
}
.item-desc {
  max-width: 350px;
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 85px;
}
.item-price {
  width: 40px;
  font-size: 16px;
  margin-right: 65px;
  white-space: nowrap;
}
.item-count {
  font-size: 16px;
  width: 150px;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  margin-right: 45px;
  border: 2px solid #e5e5e5;
}
.item-count .sub,
.item-count .add {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  cursor: pointer;
}
.item-count .sub {
  border-right: 1px solid #e5e5e5;
}
.item-count .add {
  border-left: 1px solid #e5e5e5;
}

.item-total {
  width: 40px;
  font-size: 18px;
  color: #f60;
  margin-right: 100px;
  white-space: nowrap;
}
.delete-item {
  width: 14px;
  height: 12px;
  background: url("/imgs/icon-close.png") no-repeat;
  background-size: contain;
  cursor: pointer;
}

/* 收藏头部 */
.list-header {
  display: flex;
  height: 79px;
  align-items: center;
}
.select-all-btn {
  width: 22px;
  height: 22px;
  margin-right: 20px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}
.select-all-text {
  font-size: 14px;
  color: #666;
  margin-right: 140px;
}
.goods-name {
  /* margin-right: 391px; */
  max-width: 350px;
}
.goods-price {
  /* margin-right: 126px; */
  width: 40px;
  text-align: center;
}
.goods-count {
  margin-right: 125px;
}
.goods-total {
  margin-right: 110px;
}

/* 收藏结算区域 */
.purches {
  display: flex;
  align-items: center;
  height: 112px;
  background-color: fff;
  justify-content: space-between;
}
.left {
  display: flex;
}
.left a {
  color: #333;
  margin-right: 40px;
}
.left span {
  padding: 0 4px;
  color: #ff6600;
}
.right {
  display: flex;
  align-items: center;
}
.right .totalPrice {
  color: #ff6600;
  margin-right: 20px;
}
.right .totalPrice span {
  font-size: 18px;
}
.right .goPay {
  width: 150px;
  height: 40px;
  /* background-color: #ff6600; */
  color: #fff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.checked {
  background: url("/imgs/icon-gou.png") no-repeat center;
  background-size: 22px;
  background-color: #ff6600;
  border: 1px solid #ff6600;
}
</style>
